<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.global.js"></script>
</head>
<body>
<div id = 'app'>
    <!-- v-model双向：1：页面修改影响到数据message，2：message修改也影响节点页面值-->
    <input type="text" v-model="message">

    <!-- :value单项： 1：页面修改未影响到数据，2：message修改影响节点页面值-->
    <input type="text" :value="message">

    <!-- :value单项： 1：页面修改未影响到数据，2：message修改影响节点页面值
          视图影响数据 用@input="message = $event.target.value"
          数据影响视图 用proxy 详细见04_proxy响应式原理.html-->
    <input type="text" :value="message" @input="message = $event.target.value">

    {{message}} <br>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
               message:'hello world'
            }
        },
    });
    let vm = app.mount('#app');

    setTimeout(()=>{
        //:value v-model message修改影响节点页面值
        vm.message = '李四'
    },2000)
</script>
</body>
</html>